<template>
  <div class="command-dispatch flex h-full bg-background text-foreground">
    <!-- 左侧：地图和功能按钮 -->
    <div class="w-2/3 relative">
      <div id="map" class="h-full w-full"></div>
      
      <!-- 功能按钮 -->
      <div class="absolute top-4 left-1/2 transform -translate-x-1/2 flex space-x-2 z-[1000]">
        <button @click="activePanel = 'report'" class="bg-primary text-primary-foreground px-4 py-2 rounded flex items-center hover:bg-primary/90">
          <span class="material-icons mr-2">add_circle_outline</span>
          上报续报
        </button>
        <button class="bg-secondary text-secondary-foreground px-4 py-2 rounded flex items-center hover:bg-secondary/90">
          <span class="material-icons mr-2">assignment</span>
          处置方案
        </button>
        <button class="bg-accent text-accent-foreground px-4 py-2 rounded flex items-center hover:bg-accent/90">
          <span class="material-icons mr-2">swap_horiz</span>
          资源调度
        </button>
        <button class="bg-muted text-muted-foreground px-4 py-2 rounded flex items-center hover:bg-muted/90">
          <span class="material-icons mr-2">build</span>
          处置部署
        </button>
        <button class="bg-destructive text-destructive-foreground px-4 py-2 rounded flex items-center hover:bg-destructive/90">
          <span class="material-icons mr-2">stop_circle</span>
          应急终止
        </button>
      </div>

      <!-- 图例 -->
      <div class="absolute bottom-4 left-4 bg-card text-card-foreground p-2 rounded shadow z-[1000]">
        <h3 class="font-bold mb-2">图例</h3>
        <div class="flex items-center mb-1">
          <span class="w-4 h-4 bg-red-500 rounded-full mr-2"></span>
          <span>应急专家</span>
        </div>
        <div class="flex items-center mb-1">
          <span class="w-4 h-4 bg-green-500 rounded-full mr-2"></span>
          <span>应急队伍</span>
        </div>
        <div class="flex items-center mb-1">
          <span class="w-4 h-4 bg-blue-500 rounded-full mr-2"></span>
          <span>应急车辆</span>
        </div>
        <div class="flex items-center">
          <span class="w-4 h-4 bg-yellow-500 rounded-full mr-2"></span>
          <span>视频监控</span>
        </div>
      </div>
    </div>

    <!-- 右侧：功能面板 -->
    <div class="w-1/3 bg-muted p-4 overflow-y-auto">
      <div v-if="activePanel === 'report'">
        <h2 class="text-xl font-bold mb-4">上报续报</h2>
        
        <!-- 警情上报 -->
        <div class="mb-6">
          <h3 class="font-bold mb-2">警情上报</h3>
          <div class="space-y-2">
            <input v-model="report.title" placeholder="事件标题" class="w-full p-2 rounded bg-input border border-input">
            <textarea v-model="report.description" placeholder="事件描述" rows="3" class="w-full p-2 rounded bg-input border border-input"></textarea>
            <input v-model="report.location" placeholder="事发地点" class="w-full p-2 rounded bg-input border border-input">
            <input v-model="report.time" type="datetime-local" class="w-full p-2 rounded bg-input border border-input">
          </div>
          <button @click="submitReport" class="mt-2 bg-primary text-primary-foreground px-4 py-2 rounded hover:bg-primary/90">提交上报</button>
        </div>
        
        <!-- 警情续报 -->
        <div>
          <h3 class="font-bold mb-2">警情续报</h3>
          <div class="space-y-2">
            <textarea v-model="update.content" placeholder="续报内容" rows="3" class="w-full p-2 rounded bg-input border border-input"></textarea>
            <input type="file" @change="handleImageUpload" multiple class="w-full p-2 rounded bg-input border border-input">
            <div v-if="update.images.length > 0" class="flex flex-wrap gap-2">
              <img v-for="(image, index) in update.images" :key="index" :src="image" class="w-20 h-20 object-cover rounded">
            </div>
          </div>
          <div class="mt-2 space-x-2">
            <button @click="submitUpdate" class="bg-primary text-primary-foreground px-4 py-2 rounded hover:bg-primary/90">提交续报</button>
            <select v-model="selectedTemplate" class="p-2 rounded bg-input border border-input">
              <option value="">选择模板</option>
              <option value="template1">模板1</option>
              <option value="template2">模板2</option>
            </select>
            <button @click="useTemplate" class="bg-secondary text-secondary-foreground px-4 py-2 rounded hover:bg-secondary/90">套用模板</button>
            <button @click="sendTemplate" class="bg-accent text-accent-foreground px-4 py-2 rounded hover:bg-accent/90">发送短信</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import L from 'leaflet'
import 'leaflet/dist/leaflet.css'

let map = null
const activePanel = ref('report')
const report = ref({ title: '', description: '', location: '', time: '' })
const update = ref({ content: '', images: [] })
const selectedTemplate = ref('')

onMounted(() => {
  initMap()
})

onUnmounted(() => {
  if (map) {
    map.remove()
  }
})

function initMap() {
  map = L.map('map').setView([34.795, 109.942], 14)

  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '© OpenStreetMap contributors'
  }).addTo(map)

  addMarker([34.795, 109.942], '应急指挥中心', 'red')
  addMarker([34.797, 109.945], '应急队伍', 'green')
  addMarker([34.793, 109.940], '应急车辆', 'blue')
}

function addMarker(position, title, color) {
  const marker = L.circleMarker(position, {
    radius: 8,
    fillColor: color,
    color: '#000',
    weight: 1,
    opacity: 1,
    fillOpacity: 0.8
  }).addTo(map)

  marker.bindPopup(title)
}

function submitReport() {
  console.log('提交上报信息:', report.value)
  // 这里添加提交逻辑
}

function submitUpdate() {
  console.log('提交续报信息:', update.value)
  // 这里添加提交逻辑
}

function handleImageUpload(event) {
  const files = event.target.files
  for (let i = 0; i < files.length; i++) {
    const reader = new FileReader()
    reader.onload = (e) => {
      update.value.images.push(e.target.result)
    }
    reader.readAsDataURL(files[i])
  }
}

function useTemplate() {
  // 这里添加套用模板的逻辑
  console.log('套用模板:', selectedTemplate.value)
}

function sendTemplate() {
  // 这里添加发送短信的逻辑
  console.log('发送短信模板:', selectedTemplate.value)
}
</script>

<style scoped>
.command-dispatch {
  height: calc(100vh - 64px); /* 假设顶部导航栏高度为64px，根据实际情况调整 */
}

#map {
  height: 100%;
  width: 100%;
}

/* 添加一些按钮样式 */
button {
  transition: all 0.3s ease;
}

button:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
</style>
